<template>
	<view class="container">
		<!--轮播-->
		<swiper class="swiper-box" :autoplay="true" :interval="3000" :duration="1000" :circular="true">
			<swiper-item v-for="(item,index) in topArticleList">
				<text class="slide-title">{{item.title}}</text>
				<image v-if="item.thumbnail" @error="imageError(index)" :src='item.thumbnail' class="banner-img"
					@click="toDetail(item.id)">
				</image>
				<image v-else src='https://zlw-blog.oss-cn-hangzhou.aliyuncs.com/2024/08/13/notfound.png'
					class="banner-img" @click="toDetail(item.id)">
				</image>
			</swiper-item>
		</swiper>
		<!-- 随机句子 -->
		<view>
			<u-notice-bar :text="sentence"></u-notice-bar>
		</view>
		<!--列表-->
		<view class="list">
			<card v-for="(item, index) in articles" :key="item.id" :item='item' v-if="item.isTop==0"></card>
		</view>

		<u-loadmore :status="hasMore" />
		<u-loading-page :loading="loading" loading-text="loading..."></u-loading-page>
		<u-back-top :scroll-top="scrollTop"></u-back-top>
	</view>
</template>

<script>
	import {
		articleList,
		getTopList,
		updateViewCount
	} from '../api/article'
	import {
		getSentence
	} from '../api/sentence';

	export default {
		data() {
			return {
				scrollTop: 0,
				b_loading: 0, // 0默认 1加载中 2没有更多了
				// 查询参数
				queryParams: {
					pageNum: 1,
					pageSize: 8

				},
				articles: [],
				topArticleList: [],
				hasMore: "loadmore",
				loading: false,
				sentence: "",
				myInterval: null
			}
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		onReachBottom() {
			this.getList()
		},
		onShow() {
			this.myTask()
			this.loading = true
			getTopList().then((res) => {
				this.topArticleList = res
				this.loading = false
			}).catch(() => {
				this.loading = false
			})
			this.getList()
			// this.myInterval = setInterval(() => {
			// 	this.myTask()
			// }, 12000)
		},
		// onUnload() {
		// 	// 页面销毁时清除setInterval
		// 	if (this.myInterval) {
		// 		clearInterval(this.myInterval);
		// 	}
		// },
		methods: {
			myTask() {
				getSentence().then((res) => {
					this.sentence = res.content
				})
			},
			toDetail(id) {
				updateViewCount(id)
				uni.navigateTo({
					url: `/pages/article/detail?id=${id}`
				})
			},
			getList() {
				articleList(this.queryParams).then(res => {
					if (res.total <= this.articles.length) {
						this.hasMore = "nomore"
					} else {
						this.hasMore = "loading"
						this.articles = this.articles.concat(res.rows)
						this.queryParams.pageNum++
					}
				})
			},
			imageError(index) {
				this.topArticleList[index]['thumbnail'] =
					"https://zlw-blog.oss-cn-hangzhou.aliyuncs.com/2024/08/13/notfound.png"
			}
		}
	}
</script>

<style lang="scss" scoped>
	.swiper-item,
	.banner-img {
		width: 100%;
		height: 100%;
	}

	.swiper-box {
		padding: 40rpx;
		height: 400rpx;
	}

	.slide-title {
		position: absolute;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.5);
		color: #fff;
		padding: 10px;
		font-size: 14px;
		width: 100%;
	}
</style>